<template>
	<div class="company-coopera-content">
			<div class="company-coopera-head flexItems">
				<div class="company-coopera-date flexItems">
					<span class="h66">{{$t('common.company.submitTime')}}：</span>
					<el-date-picker
						v-model="date"
						value-format="yyyy-MM-dd HH:mm:ss"
						type="monthrange"
						range-separator="~"
						:start-placeholder="$t('common.resume.start')"
						:end-placeholder="$t('common.resume.end')"
						@change='handleDateChange'
					></el-date-picker>
				</div>
				<div class="company-coopera-checkout">
					<el-checkbox-group v-model="checkList" @change="bindCheckout">
						<el-checkbox label="1">{{$t('common.policy.unhandle')}}</el-checkbox>
						<el-checkbox label="2">{{$t('common.policy.handled')}}</el-checkbox>
					</el-checkbox-group>
				</div>
			</div>
			<div class="company-coopera-foot flex" v-if="total!=0">
				<div class="company-coopera-left">
					<div class="company-coopera-list">
						<div
							class="company-coopera-item"
							v-for="(item, idx) in records"
							:key="idx"
							:class="{ 'company-coopera-item-On': cooperaIndex == idx }"
							@click="bindCoopera(idx)"
						>
							<div class="company-coopera-item-box" v-if="type=='0'">
								<div class="company-coopera-item-title">{{item.description}}</div>
								<div class="company-coopera-item-cont flexBetween">
									<span class="font12 h99">[{{item.cooperationTypeTxt}}]</span>
									<span class="font12 h99">{{item.createTime}}</span>
									<span class="font12 color1" v-if="item.status==2">{{item.statusTxt}}</span>
									<span class="font12 color1" v-else>{{item.statusTxt}}</span>
								</div>
							</div>
							<div class="company-coopera-item-box" v-else>
								<div class="company-coopera-item-title">{{item.question}}</div>
								<div class="company-coopera-item-cont flexBetween">
									<span class="font12 h99">[{{item.communityTypeTxt}}]</span>
									<span class="font12 h99">{{item.createTime}}</span>
									<span class="font12 color1" v-if="item.status==2">{{item.statusTxt}}</span>
									<span class="font12 color1" v-else>{{item.statusTxt}}</span>
								</div>
							</div>
						</div>
					</div>
					<div class="company-coopera-page" v-if="total > pageSize">
						<el-pagination :current-page="pageNo" :page-size="pageSize" layout="total, jumper, prev, next" :total="total" @current-change="handleCurrentChange"></el-pagination>
					</div>
				</div>
				<div class="company-coopera-right" v-if="detail">
					<div class="company-coopera-right-infomation flexItems" v-if="detail.userName">
						<div class="photo" v-if="detail.headPicture"><img :src="imgUrl + detail.headPicture" alt="" /></div>
						<div class="text">
							<p class="font20">{{detail.userName}}</p>
							<p class="font14">
								{{detail.sexTxt}}
								<span v-if="detail.telentTypeTxt">|</span>
								{{detail.telentTypeTxt}}
								<span v-if="detail.topUniversity">|</span>
								{{detail.topUniversity}}
							</p>
						</div>
					</div>
					<div class="company-coopera-right-box">
						<div class="zmlTitle">{{$t('common.company.feedbackInfo')}}</div>
						<div class="company-coopera-right-box-content clearfix">
							<div class="text-box">{{$t('common.company.name')}}：{{detail.name}}</div>
							<div class="text-box">{{$t('common.company.submitTime')}}：{{detail.createTime}}</div>
							<div class="text-box">{{$t('common.company.phone')}}：{{detail.phone}}</div>
							<div class="text-box">{{$t('common.company.submitType')}}：{{detail.terminalTxt}}</div>
						</div>
					</div>
					<div class="company-coopera-right-box">
						<div class="zmlTitle">{{$t('common.company.feedbackDetail')}}</div>
						<div class="company-coopera-right-box-content" v-if="detail.description!=null || detail.description!=''">
							<p>{{detail.description}}</p>
						</div>
					</div>
					<div class="company-coopera-right-box">
						<div class="zmlTitle">{{$t('common.company.feedbackSitua')}}</div>
						<div class="company-coopera-right-box-content">
							<p>{{detail.statusTxt}}</p>
							<p>{{detail.auditOpinion}}</p>
						</div>
					</div>
				</div>
			</div>
      <div class="tipBox" v-if="total == 0">{{$t('news.listTip')}}</div>
		</div>
</template>
<script>
import { ajax, ajaxAdd } from '@/utils/js.js';
import { cooperationList, cooperationDetail,requestSuggest,suggestDetail} from '@/services/api.js';
const log = console.log;
export default {
  props:{
    type:{
      type:Number,
      default:0, //0-交流反馈,1-合作申请列表
    }
  },
	data() {
		return {
			resource: {},
			imgUrl: this.$store.state.imgUrl,
			date: '',
			checkList: [], //['1', '2']
			data: {},
			records: [],
			cooperaIndex: 0, //高亮item
			pageNo: 1,
			pageSize: 10,
			total:0,
			detail: {userName:''}, //详情数据
		};
	},

	mounted() {
		this.dataList();
	},
	watch: {
		'$i18n.locale'() {
      this.dataList();
		}
	},
	methods: {
		// 多选框
		bindCheckout() {
			console.log(this.checkList);
			this.dataList()
		},
		// 切换建议
		bindCoopera(idx) {
			this.cooperaIndex = idx;
			
			var obj = this.records[this.cooperaIndex]
			this.detailReq(obj.id)
		},
		//时间改变
		handleDateChange() {
			this.dataList()
		},
		//当前页改变
		handleCurrentChange(number) {
			this.pageNo = number
			this.dataList()
		},
		//合作申请列表
		dataList(){
			var status = ''
			if (this.checkList.length == 1) {
				status = this.checkList[0] //1未处理，2已处理
			}
			var beginTime = '',endTime = ''
			if (this.date != '') {
				beginTime = this.date[0]
				endTime = this.date[1]
			}
			let data = {
				beginTime: beginTime,
				endTime: endTime,
				pageNo: this.pageNo,
				pageSize: this.pageSize,
				status: status //1未处理，2已处理
      };
      let url
      this.type == 0 ? url = cooperationList : url = requestSuggest;
			ajaxAdd(this, url, data, res => {
				this.total = res.data.total
				let records
        this.type == 0 ? records = res.data.records : records = res.data.records;
        this.records = records
				log('数据records',res)
				if(records.length == 0){
					this.detail={userName:''}
				}else{
					this.detailReq(records[0].id)
				}
			});
		},
		detailReq(id) {
      if(this.type == 0){
				ajax(this, cooperationDetail, {id}, res => {
					log('合作申请详情',res)
					this.detail = res.data
				});
      }else{
				ajax(this, suggestDetail, {id}, res => {
					log('建议详情',res)
					this.detail = res.data
				});
      }
			
		},
	}
};
</script>
<style lang="scss">
.company-coopera-content {
	width: 100%;
	min-height: 800px;
	background-color: #fff;
	margin-top: 20px;
	padding: 0 22px;
	.company-coopera-head {
		border-bottom: 1px solid #d1d1d1;
		.company-coopera-date {
			padding: 20px 0;
		}
		.company-coopera-checkout {
			padding-left: 60px;
		}
	}
	.company-coopera-foot {
		padding: 20px 0;
		.company-coopera-left {
			width: 300px;
			.company-coopera-list {
				.company-coopera-item {
					background-color: #f5f5f5;
					padding: 0 20px;
					cursor: pointer;
					border-right: 2px solid transparent;
					.company-coopera-item-box {
						padding: 20px 0;
						border-bottom: 1px solid #d1d1d1;
						.company-coopera-item-title {
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-weight: bold;
							margin-bottom: 10px;
						}
					}
				}
				.company-coopera-item:nth-last-of-type(1) .company-coopera-item-box {
					border-bottom: 0;
				}
				.company-coopera-item-On {
					background-color: #ffffff;
					border-right: 2px solid #0f54bc;
				}
			}
			.company-coopera-page {
				padding-top: 12px;
				.el-pagination__jump {
					margin-right: 24px;
				}
			}
		}
		.company-coopera-right {
			flex: 1;
			padding-left: 20px;
			.company-coopera-right-infomation {
				padding-bottom: 15px;
				.photo {
					width: 80px;
					height: 80px;
					overflow: hidden;
					background-color: #9f9f9f;
					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}
				}
				.text {
					flex: 1;
					padding-left: 16px;
					p {
						margin: 15px 0;
					}
				}
			}
			.company-coopera-right-box {
				padding: 15px 0!important;
				margin-bottom:15px;
				border-bottom: 1px solid #d1d1d1;
				border-top:none!important;
				.zmlTitle {
					padding: 0 0 0 16px;
					margin-bottom: 20px;
				}
				.company-coopera-right-box-content {
					padding-left: 16px;
					p {
						color: #666;
						line-height: 22px;
					}
					.text-box {
						width: 50%;
						float: left;
						margin: 6px 0;
					}
				}
			}
		}
	}
}
</style>
